<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雨辰辰开发工具助手</title>
    <link rel="stylesheet" href="styles.css">
    <!-- AOS样式已移除，因为违反CSP策略 -->
</head>
<body>
    <div class="background-container">
        <div class="mountain-bg"></div>
    </div>
    <div class="container">
        <div class="glass-decoration"></div>
        <header>
            <h1>雨辰辰 开发工具助手</h1>
        </header>
        
        <div class="tabs">
            <button class="tab-btn active" data-tab="json">
                <span class="tab-icon">📝</span>
                <span class="tab-text">JSON美化</span>
            </button>
            <button class="tab-btn" data-tab="timestamp">
                <span class="tab-icon">⏰</span>
                <span class="tab-text">时间戳转换</span>
            </button>
            <button class="tab-btn" data-tab="translate">
                <span class="tab-icon">🌐</span>
                <span class="tab-text">翻译</span>
            </button>
            <button class="tab-btn" data-tab="qrcode">
                <span class="tab-icon">📱</span>
                <span class="tab-text">二维码生成</span>
            </button>
            <button class="tab-btn" data-tab="bookmarks">
                <span class="tab-icon">🔖</span>
                <span class="tab-text">书签同步</span>
            </button>
            <button class="tab-btn" data-tab="wechat-login">
                <span class="tab-icon">💬</span>
                <span class="tab-text">微信登录</span>
            </button>
            <button class="tab-btn" data-tab="moments">
                <span class="tab-icon">✍️</span>
                <span class="tab-text">说说</span>
            </button>
        </div>
        
        <div class="tab-content">
            <!-- JSON美化 -->
            <div id="json" class="tab-pane active">
                <div class="tool-section">
                    <h3>JSON美化</h3>
                    <textarea id="json-input" placeholder="请输入JSON字符串..."></textarea>
                    <div class="button-group">
                        <button id="json-format">美化</button>
                        <button id="json-compress">压缩</button>
                        <button id="json-copy">复制结果</button>
                    </div>
                    <textarea id="json-output" placeholder="美化后的JSON将显示在这里..." readonly></textarea>
                </div>
            </div>
            
            <!-- 时间戳转换 -->
            <div id="timestamp" class="tab-pane">
                <div class="tool-section">
                    <h3>时间戳转换</h3>
                    <div class="timestamp-section">
                        <div class="input-group">
                            <label>时间戳转日期:</label>
                            <input type="text" id="timestamp-input" placeholder="请输入时间戳...">
                            <button id="timestamp-to-date">转换</button>
                            <div id="date-output" class="output"></div>
                        </div>
                        
                        <div class="input-group">
                            <label>日期转时间戳:</label>
                            <input type="datetime-local" id="date-input">
                            <button id="date-to-timestamp">转换</button>
                            <div id="timestamp-output" class="output"></div>
                        </div>
                        
                        <div class="current-time">
                            <button id="current-timestamp">获取当前时间戳</button>
                            <div id="current-time-output" class="output"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 翻译 -->
            <div id="translate" class="tab-pane">
                <div class="tool-section">
                    <h3>翻译工具</h3>
                    <div class="translate-section">
                        <div class="language-select">
                            <select id="source-lang">
                                <option value="auto">自动检测</option>
                                <option value="zh">中文</option>
                                <option value="en">英语</option>
                                <option value="ja">日语</option>
                                <option value="ko">韩语</option>
                            </select>
                            <span>→</span>
                            <select id="target-lang">
                                <option value="en">英语</option>
                                <option value="zh">中文</option>
                                <option value="ja">日语</option>
                                <option value="ko">韩语</option>
                            </select>
                        </div>
                        <textarea id="translate-input" placeholder="请输入要翻译的文本..."></textarea>
                        <button id="translate-btn">翻译</button>
                        <div id="translate-output" class="output"></div>
                    </div>
                </div>
            </div>
            
            <!-- 二维码生成 -->
            <div id="qrcode" class="tab-pane">
                <div class="tool-section">
                    <h3>二维码生成</h3>
                    <div class="qrcode-section">
                        <textarea id="qrcode-input" placeholder="请输入要生成二维码的内容..."></textarea>
                        <div class="options">
                            <div class="option-group">
                                <label>尺寸:</label>
                                <select id="qrcode-size">
                                    <option value="128">128x128</option>
                                    <option value="256" selected>256x256</option>
                                    <option value="512">512x512</option>
                                </select>
                            </div>
                        </div>
                        <button id="generate-qrcode">生成二维码</button>
                        <div id="qrcode-output" class="qrcode-container"></div>
                        <button id="download-qrcode" class="hidden">下载二维码</button>
                    </div>
                </div>
            </div>
            
            <!-- 书签同步 -->
            <div id="bookmarks" class="tab-pane">
                <div class="tool-section">
                    <h3>书签同步</h3>
                    <div class="bookmarks-section">
                        <div class="sync-options">
                            <div class="option-group">
                                <label>同步方式:</label>
                                <select id="sync-method">
                                    <option value="export">导出书签</option>
                                    <option value="import">导入书签</option>
                                    <option value="cloud" selected>云端同步</option>
                                </select>
                            </div>
                        </div>
                        
                        <div id="export-section" class="sync-section hidden">
                            <p>导出当前浏览器的所有书签</p>
                            <button id="export-bookmarks">导出书签</button>
                            <div id="export-output" class="output"></div>
                        </div>
                        
                        <div id="import-section" class="sync-section hidden">
                            <p>从文件导入书签</p>
                            <input type="file" id="import-file" accept=".json,.html">
                            <button id="import-bookmarks">导入书签</button>
                            <div id="import-output" class="output"></div>
                        </div>
                        
                        <div id="cloud-section" class="sync-section">
                            <p>将书签同步到云端或从云端同步</p>
                            <div class="cloud-actions">
                                <button id="backup-to-cloud">备份到云端</button>
                                <button id="restore-from-cloud">从云端恢复</button>
                                <button id="list-cloud-backups">查看云端备份列表</button>
                            </div>
                            <div id="cloud-output" class="output"></div>
                            <div id="backup-list" class="backup-list hidden">
                                <h4>云端备份列表</h4>
                                <ul id="backup-list-items"></ul>
                            </div>
                        </div>
                        
                        <div class="bookmarks-stats">
                            <p>当前书签总数: <span id="bookmarks-count">0</span></p>
                            <p>文件夹总数: <span id="folders-count">0</span></p>
                        </div>
                        
                        <div class="recent-bookmarks">
                            <h4>最近添加的书签</h4>
                            <ul id="recent-bookmarks-list"></ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 微信登录 -->
            <div id="wechat-login" class="tab-pane">
                <div class="tool-section">
                    <h3>微信登录</h3>
                    <div class="wechat-login-section">
                        <div id="qrcode-container" class="qrcode-display">
                            <p>点击下方按钮获取微信登录二维码</p>
                            <button id="get-qrcode-btn">获取登录二维码</button>
                        </div>
                        <div id="qrcode-image" class="qrcode-display hidden">
                            <p>请使用微信扫描下方二维码登录</p>
                            <div id="qrcode-img"></div>
                            <div id="login-status" class="login-status">等待扫描...</div>
                            <button id="refresh-qrcode" class="secondary-btn">刷新二维码</button>
                        </div>
                        <div id="login-success" class="login-success hidden">
                            <div class="success-icon">✓</div>
                            <h4>登录成功</h4>
                            <div id="user-info" class="user-info"></div>
                            <button id="logout-btn" class="secondary-btn">退出登录</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 说说 -->
            <div id="moments" class="tab-pane">
                <div class="tool-section">
                    <h3>随手记</h3>
                    <div class="moments-section">
                        <div class="moment-input-area">
                            <textarea id="moment-content" placeholder="记录此刻的想法..." maxlength="500"></textarea>
                            <div class="input-footer">
                                <span id="char-count">0/500</span>
                                <div class="input-actions">
                                    <button id="add-moment-btn" class="primary-btn">发布</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="moments-filter">
                            <select id="filter-moments">
                                <option value="all">全部说说</option>
                                <option value="today">今天</option>
                                <option value="week">本周</option>
                                <option value="month">本月</option>
                            </select>
                            <button id="clear-all-moments" class="danger-btn">清空</button>
                        </div>
                        
                        <div class="moments-list" id="moments-list">
                            <div class="empty-state">
                                <p>还没有说说，开始记录你的第一条想法吧！</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- AOS脚本已移除，因为违反CSP策略 -->
    <script src="popup.js?v=202310310830"></script>
</body>
</html>